<template>
  <div class="histogram-scatterplot">
    <div class="histogram-scatterplot-top">
      <div class="histogram-container">
        <img :src="histogramImg" v-if="histogramImg" class="histogram" />
      </div>
      <div>
        <div class="choose-select">
          <el-select v-model="chooseParameter" @change="getParameter">
            <el-option
              v-for="item in parameters"
              :key="item.en"
              :label="item.cn"
              :value="item.en"
            ></el-option>
          </el-select>
        </div>
        <img :src="scatterplotImg" v-if="scatterplotImg" class="histogram" />
      </div>
    </div>
    <div >
      <img :src="pdf"  v-if="pdf" class="histogram-pdf" />
    </div>
  </div>
</template>
<script>
export default {
  name: "histogramScatterplot",
  props: {
    histogramImg: "",
    scatterplotImg: "",
    pdf: "",
  },
  components: {},
  data() {
    return {
      chooseParameter: "area",
      parameters: [
        { en: "area", cn: "面积" },
        { en: "perimeter", cn: "周长" },
        { en: "diameter", cn: "粒径" },
        { en: "major_axis_length", cn: "外接矩形长边" },
        { en: "minor_axis_length", cn: "外接矩形短边" },
        { en: "aspect_ratio", cn: "长宽比" },
        { en: "sphericity", cn: "球形度" },
        { en: "shape_factor", cn: "形状因子A/R" },
        { en: "smoothness", cn: "平滑度" },
      ],
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    getParameter() {
      this.$emit("scatterplot", this.chooseParameter);
    },
  },
};
</script>
<style src="@/assets/summary.scss" scoped lang="scss"></style>